﻿@model UserAddress
<form method="post" data-ajax-success="OnSuccess" data-ajax="true" action="/address/address/@(Model.Id)">
<div class="sk-ui-box">
    <div class="header">
        <div class="title">
            编辑地址
        </div>
        <div class="extra text-info">
            <p>
                固定电话格式为：国家代码-区号-电话号码 如：086-010-12345678</p>
            <p>
                或者为：区号-电话号码-分机号（分机号可不填） 如：010-12345678（-123）</p>
        </div>
    </div>
    <div class="container">
        <div class="sk-ui-form-default w-450">
            <ul>
                <li>
                    <label>
                        类 型：</label></li>
                <li>
                    <label>
                        姓 名：
                    </label>
                    <input type="text" name="Receiver" maxlength="8" class="sk-ui-input" data-val="true"
                    data-val-required="请输入您的真实姓名" value="@Model.Receiver" />
                    <span class="field-validation-error" data-valmsg-for="Receiver" data-valmsg-replace="true">
                    </span></li>
                <li>
                    <label>
                        固定电话：
                    </label>
                    <input type="text" name="phone" maxlength="16" class="sk-ui-input sk-ui-input-singleline" data-val="true"
                                       data-val-required="请输入您的固定电话！" data-phone="true" data-val-phone="请输入正确的固定电话！" value="@Model.Phone" />
                    <span class="field-validation-error" data-valmsg-for="phone" data-valmsg-replace="true">
                    </span></li>
                <li>
                    <label>
                        移动电话：
                    </label>
                    <input type="text" name="mobile" maxlength="12" class="sk-ui-input sk-ui-input-singleline" data-val="true"
                                       data-val-required="请输入您的手机号码！" data-mobile="true" data-val-mobile="请输入正确的手机号码！" value="@Model.Mobile" />
                    <span class="field-validation-error" data-valmsg-for="mobile" data-valmsg-replace="true">
                    </span></li>
            </ul>
        </div>
    </div>
    <div class="footer">
        <ul class="clearfix  mr-10">
            <li>
                <button type="submit" class="sk-ui-btn sk-ui-btn-alpha">
                    提 交</button></li><li>
                        <button type="reset" class="sk-ui-btn sk-ui-btn-beta">
                            重 置
                        </button>
                    </li>
        </ul>
    </div>
</div>
</form>
<div class="china-area">
    <div id="area-title">
        <a href="javascript:void(0);" onclick="renderArea();">选择省份</a>
    </div>
    <div>
        <ul id="area-container">
        </ul>
        <script id="areaTemplate" type="text/x-jquery-tmpl">
            <li onclick="renderArea('${Code}');">${Name}</li>
        </script>
        <script type="text/javascript">
            function renderArea(code) {
                var data = Sk.ChinaAreas;
                if (code != undefined && code != null && code.length > 1) {
                    if (code.length == 2) {
                        data = $.Enumerable.From(data).Where(function (o) { return o.Code == code; }).FirstOrDefault().Sub;
                    }
                    else if (code.length == 4) {
                        var province = $.Enumerable.From(data).Where(function (o) { return o.Code == code.substr(0, 2); }).FirstOrDefault();
                        $("#area-title").html($.format('<a href="javascript:void(0);" onclick="renderArea(\'{0}\');">{1}</a>', province.Code, province.Name));
                        var x = province.Sub;
                        data = $.Enumerable.From(x).Where(function (o) { return o.Code == code; }).FirstOrDefault().Sub;
                    }
                    else if (code.length == 6) {
                        alert(code);
                        return;
                    }
                }
                $("#area-container").empty();
                $("#areaTemplate").tmpl(data).appendTo("#area-container");
            }
        </script>
    </div>
</div>
<style>
    .china-area { position: absolute; top: 30px; right: 0px; border: 1px solid red; }
    .china-area #area-container { width: 300px; }
    .china-area #area-container li { width: 100px; float: left; }
</style>
<script type="text/javascript">
    $(function () {
        $.validator.unobtrusive.parse($('form'));
    });
    function OnSuccess(result) {
        if (result.Status) {

        }
        else {
            var data = result.Data;
            var message = result.Message;
            $('span[data-valmsg-for="' + data + '"]').html(message).show();
        };
    }
</script>
